<template>
    <div id="CateProbar" style="width: 100%; height: 260px;"></div>
</template>

<script setup lang="ts">
import { CategoryProApi } from "@/api";
import { onMounted } from 'vue';
//引入echarts
import * as echarts from 'echarts';

onMounted(() => {
    CategoryProApi.selectBar.call().then((res) => {
        console.log(res);
        //调用
        initCart(res)
    })
})

const initCart = (data:any) => {
    let chart = echarts.init(document.getElementById("CateProbar"), "dark");
    
    console.log(Array.from(data,(item)=> item.name));
    console.log(Array.from(data, ({ name, ptotal }) => name));
     console.log(Array.from(data, ({  ptotal }) => ptotal));

    let option = {
        title: {
            text: '本周库存量统计',
            subtext: '数据实时统计',
            left: "center"
        },
        legend: {},
         toolbox: {
            show: true,
            feature: {
                //区域缩放
                dataZoom: {
                    //区域还原
                    yAxisIndex: 'none'
                },
                //数据视图
                dataView: { readOnly: false },
                //视图切换
                magicType: { type: ['line', 'bar'] },
                //刷新
                restore: {},
                //下载
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: Array.from(data, ({ name, ptotal }) => name)
        },
        yAxis: {
            type: 'value',
            minInterval:1
        },
        series: [
            {
                data: Array.from(data, ({ ptotal }) => ptotal),
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    //设置chart数据
    chart.setOption(option);
}
</script>
<style scoped>


</style>
